<script>
export default {
    name: "ResumeArticleList",
    props: {
        list: Array
    },
    methods: {
        getYear(date) {
            return date.split("-")[0];
        },
        getDay(date) {
            const arr = date.split("-")
            return arr[1].concat("-", arr[2]);
        }
    }
}
</script>

<template>
    <div class="flex column center align-center" style="border-radius: 6px;width: 945px;background: white;height: fit-content;box-shadow:0 0 15px 0 rgba(0,0,0,.1);margin-top: 50px;padding: 15px 0">
        <div class="flex column" v-for="(item,i) in list" :key="i">
            <el-divider v-if="i!=0" style="margin:8px 0"/>
            <div  class="flex row center align-center" style="width: 860px;height: 110px">
                <div class="flex column center align-center" style="width: 76px;height: 100%">
                    <span style="font-size: 24px;color: #626971;width: 100%">{{ getYear(item.updateTime) }}</span>
                    <span
                        style="text-align: left;font-size: 14px;color: #626971;width: 100%">{{ getDay(item.updateTime) }}</span>
                </div>
                <el-divider direction="vertical" style="height: 50px"/>
                <div class="flex column " style="width: 760px;padding-left: 20px">
                    <span class="title">{{ item.title }}</span>
                    <span
                        style="line-height: 26px;color: #878787;white-space: normal;margin-top: 14px;font-size: 14px;">{{ item.summary }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
.title {
    font-size: 16px;
    color: #333;
    text-decoration: none;
    font-weight: normal;
    cursor: pointer;
}

.title:hover {
    color: rgb(255, 192, 1);
}
</style>
